<%- contentFor('heroContent') %>
    <!-- Hero Banner with Search -->
    <div class="hero-banner search-hero-banner">
        <div class="hero-content">
            <h1>Search Results</h1>
            <div class="search-box-container">
                <form action="/search" method="GET" class="main-search-form">
                    <div class="search-select-wrapper">
                        <select name="searchType">
                            <option value="all" <%=searchType==='all' ? 'selected' : '' %>>All</option>
                            <option value="title" <%=searchType==='title' ? 'selected' : '' %>>Title</option>
                            <option value="author" <%=searchType==='author' ? 'selected' : '' %>>Author</option>
                            <option value="isbn" <%=searchType==='isbn' ? 'selected' : '' %>>ISBN(13 digits)</option>
                            <option value="issn" <%=searchType==='issn' ? 'selected' : '' %>>ISSN(8 digits)</option>
                            <option value="publisher" <%=searchType==='publisher' ? 'selected' : '' %>>Publisher
                            </option>
                        </select>
                    </div>
                    <input type="text" name="query" value="<%= searchQuery %>" placeholder="Type ISBN or title..."
                        class="main-search-input">
                    <button type="submit" class="main-search-btn">
                        <i class="search-icon"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="page-container">
        <!-- 分类侧边栏 -->
        <!-- <div class="publisher-sidebar">
            <h3>Categories</h3>
            <ul class="publisher-list">
                <li>
                    <a href="/search<%= searchQuery ? '?query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %>"
                        class="publisher-link <%= !category ? 'active' : '' %>">
                        All <span class="count">(All)</span>
                    </a>
                </li>
                <% if (categories && categories.length> 0) { %>
                    <% categories.forEach(function(cat) { %>
                        <li>
                            <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType + '&' : '' %>category=<%= encodeURIComponent(cat.name) %>"
                                class="publisher-link <%= category === cat.name ? 'active' : '' %>">
                                <%= cat.name %> <span class="count">(<%= cat.count %>)</span>
                            </a>
                        </li>
                        <% }); %>
                            <% } else { %>
                                <li>No categories found</li>
                                <% } %>
            </ul>
        </div> -->

        <!-- 搜索结果内容 -->
        <div class="book-list-content">
            <div class="book-list-header">
                <h1>Search Results</h1>
                <% if (searchQuery) { %>
                    <p>Found <%= totalItems %> results for "<%= searchQuery %>"<%= category ? ' in category "' +
                                    category + '"' : '' %>
                    </p>
                    <% } else if (category) { %>
                        <p>Showing all items in category "<%= category %>"</p>
                        <% } else { %>
                            <p>Enter keywords to search</p>
                            <% } %>
            </div>

            <% if (error) { %>
                <div class="error-message">
                    <p>
                        <%= error %>
                    </p>
                </div>
                <% } %>

                    <!-- 列表视图 -->
                    <div class="books-list">
                        <% if (results && results.length> 0) { %>
                            <% results.forEach(function(item) { %>
                                <div class="book-list-item">
                                    <a href="<%= getDetailUrl(item) %>" class="book-list-cover">
                                        <% if (item.CoverImage) { %>
                                            <img src="<%= item.CoverImage %>"
                                                alt="<%= item.Title || item.Journals || 'Cover' %>">
                                            <% } else { %>
                                                <img src="/images/img.png"
                                                    alt="<%= item.Title || item.Journals || 'Cover' %>"
                                                    class="placeholder-image">
                                                <% } %>
                                    </a>
                                    <div class="book-list-info">
                                        <div>
                                            <h3 class="book-list-title">
                                                <a href="<%= getDetailUrl(item) %>"
                                                    style="text-decoration: none; color: inherit;">
                                                    <%= item.Title || item.Journals || 'Untitled' %>
                                                </a>
                                            </h3>
                                            <% if (item.Authors) { %>
                                                <p class="book-list-author">
                                                    <%= item.Authors %>
                                                </p>
                                                <% } %>
                                                    <% if (item.Publisher) { %>
                                                        <p class="book-list-publisher">
                                                            <%= item.Publisher %>
                                                        </p>
                                                        <% } %>
                                                            <% if (item.ISBN) { %>
                                                                <p class="book-list-isbn">ISBN: <%= item.ISBN %>
                                                                </p>
                                                                <% } %>
                                                                    <% if (item.ISSN) { %>
                                                                        <p class="book-list-issn">ISSN: <%= item.ISSN %>
                                                                        </p>
                                                                        <% } %>
                                                                            <% if (item.category) { %>
                                                                                <p class="book-list-category">Category:
                                                                                    <%= item.category %>
                                                                                </p>
                                                                                <% } %>
                                                                                    <p class="book-list-source">
                                                                                        Source:
                                                                                        <% if (item.sourceType==='book'
                                                                                            ) { %>
                                                                                            Books
                                                                                            <% } else if
                                                                                                (item.sourceType==='journal'
                                                                                                ) { %>
                                                                                                Journals
                                                                                                <% } else { %>
                                                                                                    Search Database
                                                                                                    <% } %>
                                                                                    </p>
                                        </div>
                                    </div>
                                </div>
                                <% }); %>
                                    <% } else if (searchQuery || category) { %>
                                        <p class="no-data">No results found<%= searchQuery ? ' for "' + searchQuery
                                                + '"' : '' %>
                                                <%= category ? ' in category "' + category + '"' : '' %>
                                        </p>
                                        <% } %>
                    </div>

                    <!-- 分页 -->
                    <% if (results && results.length> 0 && pagination.total > 1) { %>
                        <div class="pagination">
                            <div class="pagination-controls">
                                <% if (pagination.hasPrev) { %>
                                    <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=1"
                                        class="pagination-btn">First</a>
                                    <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=<%= pagination.current - 1 %>"
                                        class="pagination-btn">&laquo;</a>
                                    <% } %>

                                        <% let startPage=Math.max(1, pagination.current - 2); let
                                            endPage=Math.min(pagination.total, pagination.current + 2); %>
                                            <% if (startPage> 1) { %>
                                                <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=1"
                                                    class="pagination-btn">1</a>
                                                <% if (startPage> 2) { %>
                                                    <span class="pagination-ellipsis">...</span>
                                                    <% } %>
                                                        <% } %>

                                                            <% for(let i=startPage; i <=endPage; i++) { %>
                                                                <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=<%= i %>"
                                                                    class="pagination-btn <%= i === pagination.current ? 'active' : '' %>">
                                                                    <%= i %>
                                                                </a>
                                                                <% } %>

                                                                    <% if (endPage < pagination.total) { %>
                                                                        <% if (endPage < pagination.total - 1) { %>
                                                                            <span class="pagination-ellipsis">...</span>
                                                                            <% } %>
                                                                                <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=<%= pagination.total %>"
                                                                                    class="pagination-btn">
                                                                                    <%= pagination.total %>
                                                                                </a>
                                                                                <% } %>

                                                                                    <% if (pagination.hasNext) { %>
                                                                                        <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=<%= pagination.current + 1 %>"
                                                                                            class="pagination-btn">&raquo;</a>
                                                                                        <a href="/search?<%= searchQuery ? 'query=' + encodeURIComponent(searchQuery) + '&searchType=' + searchType : '' %><%= category ? (searchQuery ? '&' : '') + 'category=' + encodeURIComponent(category) : '' %>&page=<%= pagination.total %>"
                                                                                            class="pagination-btn">Last</a>
                                                                                        <% } %>
                            </div>
                        </div>
                        <% } %>
        </div>
    </div>

    <style>
        .page-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .publisher-sidebar {
            flex: 0 0 250px;
            margin-right: 30px;
        }

        .book-list-content {
            flex: 1;
        }

        .publisher-link.active {
            font-weight: bold;
            color: #111579;
        }

        .book-list-category {
            font-size: 0.9em;
            color: #555;
            margin-top: 3px;
        }

        .book-list-source {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }

        @media (max-width: 768px) {
            .page-container {
                flex-direction: column;
            }

            .publisher-sidebar {
                flex: none;
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }
        }
    </style>
